window.addEventListener('load', main);

function main () {
    var log = document.querySelector('#ci-log');
    var spyY = window.innerHeight * 0.5;
    var spyLine = document.querySelector('#spy-line');
    spyLine.style.top = spyY + 'px';
    var el = document.querySelector('#my-scroll');
    var sections = el.querySelectorAll('.section');
    var checkPoints = [];
    for (var i = 0; i < sections.length; i++) {
        var section = sections[i];
        if (section.offsetHeight < window.innerHeight) {
            section.style.height = window.innerHeight + 'px';
        }
        if (section.offsetTop > spyY) {
            checkPoints.push(section.offsetTop);
        }
    }
    var background = document.querySelector('#my-scroll-background .image');

    var scrollSpy = new CIScrollSpy();
    scrollSpy.on('init', function (evt) {
        // console.log('init', evt);
    });
    scrollSpy.on('enter', function (evt) {
        // console.log('enter', evt);
        // log.innerText = 'enter ' + evt.index + ' ' + evt.scrollY;
        var id = evt.index + 1;
        var animate = ['', 'bounceInRight', 'fadeInUp', 'lightSpeedIn', 'swing'];
        var text = document.querySelector('#text-' + id);
        text.style.display = '';
        text.classList.add('animated', animate[id]);
    });
    scrollSpy.on('leave', function (evt) {
        // console.log('leave', evt);
        // log.innerText = 'leave ' + evt.index + ' ' + evt.scrollY;
        var id = evt.index + 1;
        var text = document.querySelector('#text-' + id);
        text.style.display = 'none';
        text.className = '';
    });
    scrollSpy.on('scroll', function (evt) {
        // backgroundWrap.style.bottom = - evt.scrollY + 'px'
        var style = 'translate3d(0, -' + evt.scrollY * 0.25 + 'px, 0)';
        background.style.webkitTransform = style;
        // log.innerText = 'scroll ' + evt.scrollY;
    });
    scrollSpy.init(el, {
        spyY: spyY,
        checkPoints: checkPoints
    });
}
